<template>
  <div class="register-container">
    <h2 class="register-title">注册账号</h2>
    
    <el-form
      ref="registerFormRef"
      :model="registerForm"
      :rules="registerRules"
      label-position="top"
      @keyup.enter="handleRegister"
    >
      <el-form-item prop="username" label="用户名">
        <el-input
          v-model="registerForm.username"
          placeholder="请输入用户名"
          prefix-icon="User"
        ></el-input>
      </el-form-item>
      
      <el-form-item prop="email" label="邮箱">
        <el-input
          v-model="registerForm.email"
          type="email"
          placeholder="请输入邮箱"
          prefix-icon="Message"
        ></el-input>
      </el-form-item>
      
      <el-form-item prop="password" label="密码">
        <el-input
          v-model="registerForm.password"
          type="password"
          placeholder="请输入密码"
          prefix-icon="Lock"
          show-password
        ></el-input>
      </el-form-item>
      
      <el-form-item prop="confirmPassword" label="确认密码">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
          prefix-icon="Lock"
          show-password
        ></el-input>
      </el-form-item>
      
      <el-form-item prop="companyName" label="企业名称">
        <el-input
          v-model="registerForm.companyName"
          placeholder="请输入企业名称"
          prefix-icon="Office"
        ></el-input>
      </el-form-item>
      
      <el-form-item prop="phone" label="联系电话">
        <el-input
          v-model="registerForm.phone"
          placeholder="请输入联系电话"
          prefix-icon="Phone"
        ></el-input>
      </el-form-item>
      
      <el-form-item prop="agreement">
        <el-checkbox v-model="registerForm.agreement">
          我已阅读并同意
          <el-link type="primary" @click="showAgreement">服务协议</el-link>
          和
          <el-link type="primary" @click="showPrivacy">隐私政策</el-link>
        </el-checkbox>
      </el-form-item>
      
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          class="register-button"
          @click="handleRegister"
        >
          注册
        </el-button>
      </el-form-item>
    </el-form>
    
    <div class="login-link">
      已有账号? <router-link to="/auth/login">立即登录</router-link>
    </div>

    <!-- 服务协议对话框 -->
    <el-dialog
      v-model="agreementDialogVisible"
      title="服务协议"
      width="60%"
    >
      <div class="agreement-content">
        <h3>TMS运输管理系统服务协议</h3>
        <p>欢迎使用TMS运输管理系统！请仔细阅读以下服务协议...</p>
        <!-- 这里添加具体的服务协议内容 -->
      </div>
    </el-dialog>

    <!-- 隐私政策对话框 -->
    <el-dialog
      v-model="privacyDialogVisible"
      title="隐私政策"
      width="60%"
    >
      <div class="privacy-content">
        <h3>TMS运输管理系统隐私政策</h3>
        <p>我们非常重视您的个人信息保护...</p>
        <!-- 这里添加具体的隐私政策内容 -->
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Message, Office, Phone } from '@element-plus/icons-vue'

const router = useRouter()

// 注册表单ref
const registerFormRef = ref(null)

// 注册表单数据
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  companyName: '',
  phone: '',
  agreement: false
})

// 对话框显示状态
const agreementDialogVisible = ref(false)
const privacyDialogVisible = ref(false)

// 自定义校验规则
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (registerForm.confirmPassword !== '') {
      registerFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const validateAgreement = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请阅读并同意服务协议和隐私政策'))
  } else {
    callback()
  }
}

// 表单验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度应为3-20个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  password: [
    { required: true, validator: validatePass, trigger: 'blur' },
    { min: 5, max: 20, message: '密码长度应为5-20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validatePass2, trigger: 'blur' }
  ],
  companyName: [
    { required: true, message: '请输入企业名称', trigger: 'blur' },
    { min: 2, max: 50, message: '企业名称长度应为2-50个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  agreement: [
    { validator: validateAgreement, trigger: 'change' }
  ]
}

const loading = ref(false)

// 显示服务协议
const showAgreement = () => {
  agreementDialogVisible.value = true
}

// 显示隐私政策
const showPrivacy = () => {
  privacyDialogVisible.value = true
}

// 处理注册
const handleRegister = () => {
  if (!registerFormRef.value) return
  
  registerFormRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      
      // 模拟注册请求
      setTimeout(() => {
        // 实际应用中应该调用API进行注册
        ElMessage({
          message: '注册成功！请使用新账号登录',
          type: 'success'
        })
        
        // 注册成功后跳转到登录页
        router.push('/auth/login')
        
        loading.value = false
      }, 1500)
    } else {
      return false
    }
  })
}
</script>

<style scoped>
.register-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.register-title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.register-button {
  width: 100%;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
}

.login-link a {
  color: #409EFF;
  text-decoration: none;
}

.agreement-content,
.privacy-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.6;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>